<template>
<div class="Left">
  <div class="Left_nav ">
    <div class="nav-warp container">
      <div class="nav_title" 
      v-for="(item,index) in navs" :key="item.title"
       @click="itemClick(index)">
        <div :class="{'item-child':true ,'active':activeIndex=== index} ">
          {{item.title}}
        </div>
      </div>
    </div>
  </div>
  <div class="left_content" v-show="isShow===0">
      <Main/>
  </div>
  <div class="left_content" v-show="isShow===1">
    <JinCheng/>
  </div>
  <div class="left_content" v-show="isShow===2">
    <Title/>
  </div>
</div>
</template>

<script>
import Main from './comps/Main/Main'
import JinCheng from './comps/JinCheng/JinCheng'
import Title from './comps/Title/Title'
export default {
  components: {
    Main,
    JinCheng,
    Title,
  },
  data() {
    return {
      navs: [
        {
          title: '项目主页',
        },
        {
          title: '项目进程',
        },
        {
          title: '话题',
        },
      ],
      activeIndex:0,
      isShow:0,
    }
  },
  methods: {
    itemClick(i){
      this.activeIndex = i;
      this.isShow = i;
    }
  },
  
}
</script>




<style scoped>
  .Left{
    margin-right: 5vw;
  }
.Left_nav {
  height: 60px;
  border-bottom: 1px solid #e6e6e6;
  box-shadow: 0px 1px 5px #e6e6e6;
}
.nav-warp {
  display: flex;
  height: 100%;
}
.nav_title {
  height: 100%;
  width: 100px;

  position: relative;
}
.item-child {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  position: absolute;
  left: 0;
  top: 1px;
}
.item-child:hover {
  color: var(--color-main);
  border-color: var(--color-main);
  background-color: #f9f9f9;
  box-shadow: 0px 1px 5px #e6e6e6;
}
.active {
  color: var(--color-main);
  border-color: var(--color-main);
  /* box-shadow: 0px 1px 5px #e6e6e6; */
}
.left_content{
  width: 100%;
  /* border: 1px solid; */
  background-color: white;
  margin-top: 0.9vw;
}
</style>